<template>
    <div class="lifeCycle">
        <h3>这里是生命周期测试vue</h3>
        <h5>info:{{info}}</h5>
        <h5 id="message">message:{{message}}</h5>
        <button @click = 'changeMsg'>修改message</button>
    </div>
</template>

<script>
    export default {
        name: "LifeCycleTest",
        props:['info'],
        data(){
            return {
                message:'this is life cycle message'
            }
        },
        methods:{
            show(){
                console.log('调用了life-cycle组件的show方法')
            },
            changeMsg(){
                console.log('changeMsg---');
                this.message = '法外狂徒-'+this.message;
            }
        },
        beforeCreate(){
            console.log('beforeCreate-调用了life-cycle组件的beforeCreate方法');
            console.log('beforeCreate-在这时候组件的`props`、`data`、`method`尚未创建，都处于不可用状态，所以这个函数没啥用！');
        },
        created(){
            console.log('created-调用了life-cycle组件的beforeCreate方法');
            console.log('created-在这时候组件的`props`、`data`、`method`已创建，但是组件的模版结构尚未生成（也就是页面的dom结构木得）！！！');
            console.log('created-通常在这使用ajax方法向后端调用请求，来获取所需数据！！！');
            console.log('created-info',this.info);
            console.log('created-message',this.message);
            console.log('created-调用show()');
            this.message=this.message+"--created";
            this.show();
        },
        mounted(){
            console.log('mounted--',document.getElementById('message'));
            console.log('mounted--',document.getElementById('message').innerText);
        },
        beforeUpdate(){
            console.log('beforeUpdate...',this.message);//拿到的是最新的data数据
            console.log('beforeUpdate--',document.getElementById('message').innerText);//页面还未渲染，还是旧版的HTML
        },
        updated(){
            console.log('updated...',this.message);//拿到的是最新的data数据
            console.log('updated--',document.getElementById('message').innerText);//页面已经渲染完成，是最新的
        },
        beforeDestroy(){
            console.log('beforeDestroy...');
            console.log('beforeDestroy...',this.message);//能拿到
            console.log('beforeDestroy..',document.getElementById('message').innerText);//拿不到了
            console.log('...');
        }
    }
</script>

<style scoped>
    .lifeCycle{
        background-color: #4cae4c;
        height: 250px;
    }
</style>
